<script lang="ts" setup>
import type { FileInfo } from '@/index.d';
import { deleteFileInfo, getFileInfoListByKeyWord, useLoginUserStore } from '@/index';
import {
  type UploadFile,
  type UploadFiles,
  type UploadInstance,
  type UploadProgressEvent,
  type UploadRawFile,
  type UploadUserFile
} from 'element-plus';

const props = defineProps({
  keyWord: {
    type: String,
    required: true
  },
  fileListDetail: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: true
  }
});

const upload = ref<UploadInstance>();
const { loginUser } = useLoginUserStore();
const fileList = ref<UploadUserFile[]>([]);
const headers = { Authorization: loginUser.token };
const extraData: FileInfo = {
  keyWord: props.keyWord
};

const handlePreview = (uploadFile: UploadFile) => {
  window.open(uploadFile.url, '_blank');
};

const handleRemove = async (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
  deleteFileInfo('physicalDeleteByUid', uploadFile.uid);
};

const handleSuccess = (response: FileInfo, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
  uploadFile.url = response.url;
  uploadFile.uid = response.uid as number;
};

const handleError = (error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
  console.log(error);
  console.log(uploadFile);
  console.log(uploadFiles);
};

const handleProgress = (
  evt: UploadProgressEvent,
  uploadFile: UploadFile,
  uploadFiles: UploadFiles
) => {
  evt.percent = 90;
};

const handleChange = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
  // console.log('handleChange', uploadFiles.length);
};

const handleBeforeUpload = (rawFile: UploadRawFile) => {
  extraData.creatorId = loginUser.id;
  extraData.name = rawFile.name;
  extraData.size = rawFile.size;
  extraData.uid = rawFile.uid;
  extraData.type = rawFile.type;
};

const initFileList = async () => {
  const res = await getFileInfoListByKeyWord(props.keyWord);
  if (res) {
    fileList.value.length = 0;
    res.forEach(fileInfo => {
      const uploadUserFile: UploadUserFile = {
        name: fileInfo.name as string,
        uid: fileInfo.uid as number,
        url: fileInfo.url,
        size: fileInfo.size,
        status: 'success',
        response: res
      };

      fileList.value.push(uploadUserFile);
    });
  }
};

onMounted(() => initFileList());
</script>
<template>
  <el-upload
    v-model:file-list="fileList"
    ref="upload"
    action="/api/base/file/fileInfo/appendOne"
    :data="extraData"
    :headers="headers"
    multiple
    :disabled="props.disabled"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :on-success="handleSuccess"
    :on-error="handleError"
    :on-progress="handleProgress"
    :on-change="handleChange"
    :before-upload="handleBeforeUpload"
    v-bind="$attrs"
  >
    <el-button type="primary" v-if="!disabled">点击上传</el-button>
  </el-upload>
  <br />
  <el-table :data="fileList" v-if="fileListDetail">
    <el-table-column label="name" :min-width="300">
      <template #default="{ row }">
        <el-link type="primary" :href="row.url" target="_blank">{{ row.name }}</el-link>
      </template>
    </el-table-column>
    <el-table-column label="uid" prop="uid" />
    <el-table-column label="size" prop="size" />
  </el-table>
</template>
<style lang="scss" scoped>
:deep(.el-upload-list) {
  > li {
    height: 30px;
    line-height: 30px;
  }
}
</style>
